<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>

<div class="normal-table-wrap">
  <div nz-row [nzGutter]="[32,16]">
    <div nz-col [nzXXl]="10" [nzXl]="8" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24">
      <nz-card class="m-b-10" nzTitle="BasicButton Color" nzSize="default">
        <div class="title">success</div>
        <button nz-button class="success" >成功</button>
        <button nz-button nzType="default"  disabled>禁用</button>
        <button nz-button nzType="default" nzLoading class="success">loading</button>
        <a nz-button nzType="link" style="color: #55d187">link</a>
        <a nz-button nzType="link" style="color: #55d187" nzLoading>loading link</a>
        <a nz-button nzType="link" disabled >disabled link</a>

        <div class="title">warning</div>
        <button nz-button class="warning">成功</button>
        <button nz-button nzType="default" disabled>禁用</button>
        <button nz-button nzType="default" nzLoading class="warning">loading</button>
        <a nz-button nzType="link" style="color: #efbd47">link</a>
        <a nz-button nzType="link" style="color: #efbd47" nzLoading>loading link</a>
        <a nz-button nzType="link" disabled>disabled link</a>

        <div class="title">error</div>
        <button nz-button nzType="primary" nzDanger>成功</button>
        <button nz-button nzType="default" disabled>禁用</button>
        <button nz-button nzType="primary" nzLoading nzDanger>loading</button>
        <a nz-button nzType="link" style="color: #ed6f6f">link</a>
        <a nz-button nzType="link" style="color: #ed6f6f" nzLoading>loading link</a>
        <a nz-button nzType="link" disabled>disabled link</a>

        <div class="title">ghost</div>
        <button nz-button nzType="default" style="color: #55d187;border-color: #55d187" class="m-b-8" nzGhost>幽灵成功</button>
        <button nz-button nzType="default" style="color: #efbd47;border-color: #efbd47" class="m-b-8" nzGhost>幽灵警告</button>
        <button nz-button nzType="default" style="color: #ed6f6f;border-color: #ed6f6f" class="m-b-8" nzGhost>幽灵错误</button>
        <button nz-button nzType="dashed" disabled style="color: #efbd47;border-color: #efbd47"  class="m-b-8" nzGhost>幽灵警告disabled</button>
        <button nz-button nzType="default" style="color: #ed6f6f;border-color: #ed6f6f" class="m-b-8" nzGhost>幽灵危险</button>

      </nz-card>
    </div>
    <div nz-col [nzXXl]="14" [nzXl]="16" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24">
      <nz-card class="m-b-10" nzTitle="BasicButton Types" nzSize="default">
        <div class="title">primary</div>
        <button nz-button class="m-b-8" style="color: #ffffff;border-color: #0960bd;background-color: #0960bd">
          <i nz-icon nzType="menu-unfold" nzTheme="outline"></i>主按钮
        </button>
        <button nz-button class="m-b-8" nzType="default" disabled>禁用</button>
        <button nz-button class="m-b-8" nzType="primary" nzDanger><i nz-icon nzType="menu-unfold" nzTheme="outline"></i>危险</button>
        <button nz-button class="m-b-8" nzType="primary" nzLoading>loading</button>
        <a nz-button class="m-b-8" nzType="link">link</a>
        <a nz-button class="m-b-8" nzType="link" nzLoading>loading link</a>
        <a nz-button class="m-b-8" nzType="link" disabled>disabled link</a>

        <div class="title">default</div>
        <button class="m-b-8"  nz-button> 默认</button>
        <button class="m-b-8"  nz-button nzType="default" disabled>禁用</button>
        <button class="m-b-8"  nz-button nzType="default" style="color: red;border-color: red">危险</button>
        <button class="m-b-8"  nz-button nzLoading>loading</button>
        <a  class="m-b-8" nz-button nzType="link">link</a>
        <a  class="m-b-8" nz-button nzType="link" nzLoading>loading link</a>
        <a  class="m-b-8" nz-button nzType="link" disabled>disabled link</a>

        <div class="title">dashed</div>
        <button class="m-b-8" nz-button nzType="dashed">dashed</button>
        <button class="m-b-8" nz-button nzType="dashed" disabled>禁用</button>
        <button class="m-b-8" nz-button nzType="dashed" style="color: red;border-color: red">危险</button>
        <button class="m-b-8" nz-button nzType="dashed" nzLoading>loading</button>

        <div class="title">ghost 常规幽灵按钮通常用于有色背景下</div>
        <div class="ghost-border p-t-8 p-b-8 p-l-8">
          <button nz-button nzType="default" style="color: #0960bd;border-color: #0960bd" class="m-b-8" nzGhost>幽灵主要</button>
          <button nz-button nzType="default" style="color: #fff;border-color: #fff" class="m-b-8" nzGhost>幽灵默认</button>
          <button nz-button nzType="dashed" class="m-b-8" nzGhost>幽灵disabled</button>
          <button nz-button nzType="default" class="m-b-8"  nzGhost>禁用</button>
          <button nz-button nzType="default" class="m-b-8" nzGhost nzLoading>loading</button>
        </div>
      </nz-card>
    </div>
  </div>
</div>

